import { Component, ReactNode } from "react";
import { Button, Popconfirm,Switch, Table, message, Input, Space } from "antd";
import { instance } from "../../utils/request";
import moment from 'moment';
const { Search } = Input;

class UsersList extends Component {
  state = {
    dataSource: [], // 添加初始化的dataSource属性
    total: 0, // 总条数
    pagenum: 1, // 当前页
    pagesize: 5, // 显示数量
    query: "", // 查询条件
    showAddUsersDialog: false, // 是否隐藏
    showEditUsersDialog: false, // 是否隐藏
    editData: {}, //编辑显示的商品数据
    mg_state:false
  };
  loadData = () => {
    const params = {
      pagenum: this.state.pagenum,
      pagesize: this.state.pagesize,
      query: this.state.query,
    };

    instance.get("/orders", { params }).then((res) => {
        
      this.setState({
        dataSource: res.data.data.goods,
        total: res.data.data.total,
      });
    });
  };

  handleEdit = (record: any) => {
    // users/:id 根据id 进行查询
    instance.get(`users/${record}`).then((res) => {
      this.setState({  editData: res.data.data,showEditUsersDialog: true});
    });
  };


  onSearch = (value: any) => {
    this.setState(
      (preState: any) => {
        preState.query = value;
      },
      () => {
        this.loadData();
      }
    );
  };

  // 分页，点击页、显示数量
  changePage = (page: number, pagesize: number) => {
    this.setState({ pagenum: page, pagesize: pagesize }, () => {
      this.loadData();
    });
  };

  handleDelete = (id: number) => {
    console.log(id)
    instance.delete(`/users/${id}`).then((res) => {
      if (res.data.meta.status === 200) {
        message.success("删除成功!");
        this.loadData();
      } else {
        message.error("删除失败!");
      }
    });
  };

  enableChange = (record:any, checked: boolean) => {
      instance.put(`users/${record.id}/state/${checked}`).then(res=>{
        if(res.data.meta.status ===200){
          message.success('用户状态更改成功')
          this.loadData()
        }
      })
      
  };

  // 添加商品
  handleAdd = () => {
    this.setState({ showAddUsersDialog: true });
  };
  // 关闭添加窗口
  closeAddDialog = () => {
    this.setState({showAddUsersDialog: false }, () => {
      this.loadData();
    });
    // 重新进行更新刷新页面
  };


  closeEditDialog = () => {
    this.setState({ showEditUsersDialog: false }, () => {
      this.loadData();
    });


    // 重新进行更新刷新页面
  };

  // 组件加载完挂载
  componentDidMount() {
    this.loadData();
  }

  render() {
    const columns = [
      {
        title: '订单编号',
        dataIndex: 'order_number',
        key: 'id',
      },
        {
          title: '订单价格',
          dataIndex: 'order_price',
          key: 'order_price',
        },
        {
          title: '是否付款',
          dataIndex: 'order_pay',
          key: 'order_pay',
        },
        {
          title: '是否发货',
          dataIndex: 'is_send',
          key: 'is_send',
        },
        {
          title: '下单时间',
          dataIndex: 'create_time',
          key: 'create_time',
          render: (record: any) => (
            moment(record.create_time).format('YYYY-MM-DD HH:mm:ss')
          ),
        },
        {
          title: "操作",
          dataIndex: "id",
          key: "id",
          render: (record: any) => (

            <>
              <Button
              onClick={() => {
                this.handleEdit(record);
              }}
              style={{ marginRight: "10px" }}
            >
              编辑
            </Button>
            <Popconfirm
              okText="确认"
              cancelText="取消"
              title="你确认要删除该记录嘛?"
              onConfirm={() => {
                this.handleDelete(record);
              }}
            >
              <Button type="primary">删除</Button>
            </Popconfirm>
            </>
          ),
        },
      ];
    return (
      <div>
        <Search
          style={{ width: 400, marginBottom: 20, marginTop: 10 }}
          placeholder="请输入用户名"
          onSearch={this.onSearch}
          size="large"
          allowClear
          enterButton
        />
        <Button
          style={{ marginTop: "7px", marginLeft: "10px" }}
          onClick={this.handleAdd}
          size="large"
          type="primary"
        >
          添加用户
        </Button>

        <Table
          dataSource={this.state.dataSource}
          columns={columns}
          rowKey="id"
          pagination={{
            pageSize: this.state.pagesize,
            defaultCurrent: this.state.pagenum,
            onChange: this.changePage,
            total: this.state.total,
          }}
        />

      </div>
    );
  }
}

export default UsersList;
